<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头像显示测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .avatar-test {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
        }
        .avatar-test h3 {
            margin-top: 0;
            color: #303133;
        }
        .avatar-image {
            max-width: 200px;
            max-height: 200px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
            margin: 10px 0;
        }
        .url-info {
            background-color: #f0f9ff;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
        }
        .error {
            color: #f56c6c;
        }
        .success {
            color: #67c23a;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>头像显示测试</h1>
        
        <div class="avatar-test">
            <h3>测试1: 使用完整URL</h3>
            <div class="url-info">
                URL: http://localhost:8080/picture/avatar/20250902161034_eee0b55b.jpg
            </div>
            <img 
                src="http://localhost:8080/picture/avatar/20250902161034_eee0b55b.jpg" 
                alt="测试头像1"
                class="avatar-image"
                onload="onImageLoad(this, '测试1')"
                onerror="onImageError(this, '测试1')"
            />
            <div id="result1"></div>
        </div>
        
        <div class="avatar-test">
            <h3>测试2: 使用相对路径</h3>
            <div class="url-info">
                URL: /picture/avatar/20250902161034_eee0b55b.jpg
            </div>
            <img 
                src="/picture/avatar/20250902161034_eee0b55b.jpg" 
                alt="测试头像2"
                class="avatar-image"
                onload="onImageLoad(this, '测试2')"
                onerror="onImageError(this, '测试2')"
            />
            <div id="result2"></div>
        </div>
        
        <div class="avatar-test">
            <h3>测试3: 使用文件路径</h3>
            <div class="url-info">
                URL: avatar/20250902161034_eee0b55b.jpg
            </div>
            <img 
                src="avatar/20250902161034_eee0b55b.jpg" 
                alt="测试头像3"
                class="avatar-image"
                onload="onImageLoad(this, '测试3')"
                onerror="onImageError(this, '测试3')"
            />
            <div id="result3"></div>
        </div>
        
        <div class="avatar-test">
            <h3>测试4: 模拟API响应处理</h3>
            <div class="url-info">
                模拟API响应: {"code": 200, "data": {"filePath": "avatar/20250902161034_eee0b55b.jpg", "url": "/picture/avatar/20250902161034_eee0b55b.jpg"}}
            </div>
            <button onclick="testApiResponse()">测试API响应处理</button>
            <div id="result4"></div>
        </div>
    </div>

    <script>
        function onImageLoad(img, testName) {
            const resultDiv = document.getElementById(`result${testName.slice(-1)}`);
            resultDiv.innerHTML = `<span class="success">✓ ${testName} 图片加载成功</span>`;
            console.log(`${testName} 图片加载成功:`, img.src);
        }
        
        function onImageError(img, testName) {
            const resultDiv = document.getElementById(`result${testName.slice(-1)}`);
            resultDiv.innerHTML = `<span class="error">✗ ${testName} 图片加载失败</span>`;
            console.error(`${testName} 图片加载失败:`, img.src);
        }
        
        function testApiResponse() {
            // 模拟API响应
            const mockResponse = {
                code: 200,
                message: "图片上传成功",
                data: {
                    filePath: "avatar/20250902161034_eee0b55b.jpg",
                    url: "/picture/avatar/20250902161034_eee0b55b.jpg"
                }
            };
            
            // 模拟前端的URL提取逻辑
            const newAvatarUrl = mockResponse.data?.url || mockResponse.data?.filePath;
            
            const resultDiv = document.getElementById('result4');
            resultDiv.innerHTML = `
                <div class="url-info">
                    <strong>提取的URL:</strong> ${newAvatarUrl}<br>
                    <strong>处理后的URL:</strong> ${newAvatarUrl.startsWith('/') ? newAvatarUrl : `/picture/${newAvatarUrl}`}
                </div>
                <img 
                    src="${newAvatarUrl.startsWith('/') ? newAvatarUrl : `/picture/${newAvatarUrl}`}" 
                    alt="API响应测试"
                    class="avatar-image"
                    onload="onImageLoad(this, 'API测试')"
                    onerror="onImageError(this, 'API测试')"
                />
            `;
        }
        
        // 页面加载时自动测试API响应
        window.onload = function() {
            setTimeout(testApiResponse, 1000);
        };
    </script>
</body>
</html>

